<template>
  <div>
    <div class="template_content">
      <div class="template_content_jb">
        <div class="jb_thisyear">
          <div>今年</div>
          <div :style="{ color: 'orange', fontSize: '1.6rem' }">
            ￥{{ this.title.year }}
          </div>
        </div>
        <div style="margin-left: 1rem">
          <div>总收入</div>
          <div :style="{ color: 'orange', fontSize: '1.6rem' }">
            ￥{{ this.title.total }}
          </div>
        </div>
      </div>
      <div class="percentage">同比 {{ this.title.contrast }}</div>
      <van-divider />
      <div style="margin: 1rem">
        <span class="tj"></span>
        收入统计
      </div>

      <div v-for="(item, index) in this.everyYear" :key="index">
        <hr />
        <div class="tj1">
          {{ item.year }}年<span>{{ item.income }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCustView } from "@/request/api";

export default {
  props: ["id", "headers"],
  data() {
    return {
      title: {},
      everyYear: [],
      bbb:{}
    };
  },
  created() {
    console.log("第二个", this.headers);
    getCustView({
      id: this.id,
    }).then((res) => {
      console.log("里面",res);
      // console.log("收入分析", res.data.datas[0].data);
      this.title = res.data.datas[0].data;
      this.everyYear = res.data.datas[0].data.list;
      // console.log("收入分析数组", res.data.datas[0].data.list);
    });
  },
  methods: {},
};
</script>

<style scoped>
.template_content {
  width: 90%;
  height: 90%;
  margin: 0.4rem auto 0;
  background: #fff;
}
.template_content_jb {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}
.template_content_jb div {
  flex: 1;
}
.jb_thisyear {
  border-right: 1px solid #ccc;
}
.percentage {
  width: 4.5rem;
  height: 2rem;
  padding: 0.6rem;
  margin: 0 1rem;
  box-sizing: border-box;
  background: url("../assets/底框.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.6rem;
}
.tj {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url("../assets/收入统计.png") no-repeat;
  background-size: 100% 100%;
}
.tj1 {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  box-sizing: border-box;
  margin: 0.6rem 0;
}
</style>
